<template>
    <div :class="widthFill?'haruyuki-width-100':''">
      <el-select
        :class="widthFill?'haruyuki-width-100':''"
        ref="selectRef"
        size="small"
        :disabled="disabled"
        :multiple="multiple"
        clearable
        remote
        :placeholder="'请选择 '+placeholderText"
        v-model.trim="select"
        @change="handleChange"
        @clear="handleClear"
        :loading="loading">
        <el-option
          v-for="item in options"
          :key="item.dictKey"
          :label="item.dictValue"
          :value="item.dictKey"
          :disabled="item.disabled"
          >
        </el-option>
      </el-select>
    </div>
  </template>
  
  <script>
  
  export default {
    components: {},
    props: {
      // 绑定的值（双向绑定显示的值）
      select: {
        type: [String,Array,Number],
        default: ''
      },
      // 是否多选
      multiple: {
        type: Boolean,
        default: false
      },
      // 请求地址
      code: {
        type: String,
        required: true
      },
      // 提示文本
      placeholderText: {
        type: String,
        default: ''
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      disabledKeys: {
        type: Array,
        default: () => []
      },
      widthFill: {
        type: Boolean,
        default: false
      }
    },
    data() {
      // 这里存放数据
      return {
        options: [],
        pageNumber: 1,
        pageSize: 10,
        loading: false,
      };
    },
    computed: {
    },
    mounted() {
      this.getOptionList();
    },
    watch: {
    },
    // 方法集合
    methods: {
      /* 处理值改变事件 */
      handleChange(value) {
        this.$emit('update:select', value);
        this.$emit('change', value);
      },
      /* 点击清空按钮触发 清空方法 */
      handleClear() {
        this.select = '';
        this.$emit('clear:select');
      },
      /* 下拉框隐藏事件 当前弃用 */
      handleVisible(val) {
        // 下拉框隐藏后重新加载下拉数据
        if (val) {
          this.getOptionList();
          this.select = '';
        } else {
          this.pageNumber = 1;
        }
      },
      /* 获取列表数据 */
      getOptionList(params = {}) {
        this.loading = true;
        let that = this;
        this.$http.get('/api/blade-system/dict/dictionary?code='+this.code)
          .then(({data: d}) => {
            if(d.code == 200) {
              for (let i = 0; i < d.data.length; i++) {
                const item = d.data[i];
                if (that.disabledKeys.length > 0) {
                  that.disabledKeys.forEach(key => {
                    that.options.push({
                      dictValue: item.dictValue,
                      dictKey: item.dictKey,
                      disabled: item.dictKey == key? item.disabled = true : item.disabled = false
                    });
                  })
                } else {
                  that.options.push({
                    dictValue: item.dictValue,
                    dictKey: item.dictKey,
                  });
                }
              }
              that.loading = false;
            }
          });
      },
      /* 主表格分页点击事件 */
      page(page) {
        this.pageNumber = page;
        this.getOptionList(this.params); // 更新
      }
    }
  };
  </script>
  <style lang="scss" scoped>

  </style>
  